<template>
  <div style="margin-left: 25px;margin-top: 25px;">
    <div class="left" style="float: left;">
      <img  style="position: absolute;width: 150px;margin: 25px 25px;" src="../assets/img.png" @click="toHomePage()" alt>
      <img style="margin: 25px 140px;width: 720px;" src="../assets/newbg.png" alt>
    </div>
    <div class ="right" style="float: left;margin-left: -225px;">
      <el-form style="box-shadow:2px 2px 2px 2px rgba(0.1, 0.1, 0.1, 0.1);width: 450px;height: 540px;">
        <h2><span style="text-align: center;display: block;padding-top: 25px;">账号登录</span></h2>
        <el-form-item prop="email">
          <el-input class="input0" type="username" v-model="loginForm.username" placeholder="请输入邮箱/手机号/账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input class="input0 close" show-password v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-radio-group v-model="loginForm.radio"  style="margin-left: 40px;">
          <el-radio-button class="radio" label="老师"><div style="width: 145px;">老师</div></el-radio-button>
          <el-radio-button class="radio" label="学生" style="margin-left: -14px;"><div style="width: 145px">学生</div></el-radio-button>
        </el-radio-group>
        <el-form-item prop="password">
          <el-button class="input0 close" style="background-color:#2c91d0;color: white;margin-top: 25px;" @click="login()">登录</el-button>
        </el-form-item>
        <el-form-item style="text-align: right;display: block;margin-right: 25px;">还没有账号？<a href="/register" style="text-decoration: none;color: blue;">去注册</a></el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "login",
  data(){
    return{
      loginForm: {
      username: '',
      password: '',
      radio: '老师'
      }
    }
  },
  methods:{
    toHomePage(){
      this.$router.push("/homePage")
    },
    login(){
      const _this = this;
      let url = 'login';
      if(this.loginForm.radio === '老师'){
        url = 'loginT';
      }
      axios
        .post(url,{
            "username": _this.loginForm.username,
            "password": _this.loginForm.password
      })
        .then(response => {
          console.log(response.data)
          if(response.data.code === 200){
            console.log(response.data)
            const userInfo = {
              username: _this.loginForm.username,
              role: _this.loginForm.radio,
              name: response.data.data.name,
              stuId: response.data.data.stuId,
              id: response.data.data.teacherId,
              avatar: response.data.data.profilePicture,
              school: response.data.data.school,
              password: response.data.data.password,
            }
            localStorage.setItem("userInfo",JSON.stringify(userInfo))
            _this.$router.push("/mainPage");
            _this.$message.success("登录成功!");
          }else{
            this.$message.error("用户名或密码错误!");
          }
        })
        .catch(function (error){
          console.error();
        });
    }
  }
}
</script>

<style scoped>
.close{
  padding-top: 5px;
}
.input0{
  width: 360px;height: 48px;
  display: block;
  margin-left: 40px;
}
</style>
